.Wallpaper {
  @apply h-full w-full p-5 flex flex-col gap-5;
  width: 500px;

  @media screen and (max-width: 700px) {

    width: unset !important;
  }

  .listContent {
    flex: 1;
    overflow: auto;
  }

  .tag {
    @apply flex-none px-2 py-1 transition;
    @apply rounded cursor-pointer;

    &:hover {
      background-color: rgba(var(--design-rgba-distant), 0.4);
      color: var(--design-bg-color-5);
    }
  }

  .tagChecked {
    @apply rounded cursor-pointer;
    background-color: rgba(var(--design-rgba-distant), 0.4);
    color: var(--design-bg-color-5);
  }

  .imagesList {
    @apply grid gap-5 flex-1;
    grid-auto-flow: dense;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);

    .imagesItem {
      transition: all 0.2s;
      cursor: pointer;
      @apply rounded-lg overflow-hidden;
      border-width: 2px;
      height: 140px;
    }

    .imagesChecked {
      border: 2px solid var(--design-base-color);
    }
  }
}